import * as React from "react";
import {Toolbar} from "./toolbar";
import {Spinner} from "./spinner";
import {Label} from "./label";
import {AttachmentsFilters} from "./attachments-filters";
import {Search} from "./Search";
import {UploaderInline} from "./uploader-inline";
import {UploaderStatus} from "./uploader-status";
import {Attachments} from "./attachments";
import createFragment = require("react-addons-create-fragment");

export interface AttachmentsBrowserProps {
    attachments: any[];
}

export interface AttachmentsBrowserState {

}

export class AttachmentsBrowser extends React.Component<AttachmentsBrowserProps, AttachmentsBrowserState> {
    render() {
        return (
            <div className="attachments-browser">
                {this.renderToolbar()}
                {this.renderSidebar()}
                {this.renderContent()}
            </div>
        );
    }

    renderToolbar() {
        return (
            <Toolbar
                primary={<div></div>}
                primaryClassName='search-form'
                secondary={
                    createFragment({
                        '_0': <Spinner ref="spinner" show={false}/>,
                        '_1': <Label htmlFor="media-attachments-filters">过滤</Label>,
                        '_2': <AttachmentsFilters selected="all" filters={{}}/>,
                        '_3': <Label htmlFor="searchLabel">搜索</Label>,
                        '_4': <Search/>
                    })
                }
            />
        );
    }

    renderContent() {
        let {attachments = []} = this.props;
        if (attachments.length) {
            return <Attachments attachments={attachments}/>;
        } else {
            return <UploaderInline/>
        }
    }

    renderSidebar() {
        return (
            <div className="media-sidebar">
                <UploaderStatus queue={[]} errors={[]}/>
                {this.renderSingle()}
            </div>
        )
    }

    renderSingle() {
        return (
            <div></div>
        )
    }
}
